[#include "../../activiti/common/html.ftl" /]
[@html]
    [@head_activiti title="普通流程配置" css=["fw", "ztree-ajax", "gojs"] /]
    [@body]
        [@formMain ]
            [@layoutPanelRight title="节点信息" icon=""]
                [@dataForm formId="form-node-info" ]
                    <div class="am-form-group am-radius">
                        <div id="myInspectorDiv" class="inspector"></div>
                    </div>
                [/@dataForm]
            [/@layoutPanelRight]
            <div class="fw-forms">
                <div class="panel-header">
                    <div class="title">
                        <label class="am-radio-inline">
                            <input type="radio" name="processType" value="simple" data-url="${ctx}/osfw/activiti/procdef/addSimple" data-am-ucheck > 普通流程
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" name="processType" value="major" data-url="${ctx}/osfw/activiti/procdef/addMajor" data-am-ucheck checked> 专业流程
                        </label>
                    </div>
                </div>
                [@dataForm formId="form-process-add" ]
                    <input type="hidden" name="category" value="major" />
                    <input type="hidden" name="metaInfo" value="" />
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-6">
                        <label class="is-required">流程KEY：</label>
                        <input class="am-form-field am-radius" type="text" name="procKey" required />
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-6">
                        <label class="is-required">流程名称：</label>
                        <input class="am-form-field am-radius" type="text" name="procName" required />
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label>流程配置：</label>
                        <div class="am-form-field am-radius steps" style="width: 100%; display: flex; justify-content: space-between;float: left">
                            <div id="myPaletteDiv" style="width: 100px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black;"></div>
                            <div id="myDiagramDiv" style="flex-grow: 1; height: 250px; border: solid 1px black;margin-right: 2px;"></div>
                        </div>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label>流程表单KEY：</label>
                        <input class="am-form-field am-radius" type="text" name="formKey" placeholder="流程自定义表单的KEY或系统已有表单页面的访问地址" />
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label>流程回调业务KEY：</label>
                        <input class="am-form-field am-radius" type="text" name="callbackKey" placeholder="流程节点执行后回调的业务函数或业务API接口" />
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-6 am-hide">
                        <label>是否分享：</label>
                        <select class="am-form-field am-radius" name="shareState" >
                            [#list dict.getType("act_re_procdef_share_state") as dict]
                                <option value="${dict.dictValue}">${dict.dictLabel}</option>
                            [/#list]
                        </select>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-6">
                        <label>是否发布：</label>
                        <select class="am-form-field am-radius" name="params[action]" >
                            [#list dict.getType("sys_yes_no") as dict]
                                [#if dict.dictValue == '0']
                                    <option value="${dict.dictValue}" selected>${dict.dictLabel}</option>
                                [#else ]
                                    <option value="${dict.dictValue}">${dict.dictLabel}</option>
                                [/#if]
                            [/#list]
                        </select>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label>备注：</label>
                        <textarea class="am-form-field am-radius" name="remark" rows="3" ></textarea>
                    </div>
                [/@dataForm]
            </div>
        [/@formMain]

        [@rightToolbar /]

        [@script_activiti js=["fw", "validate", "ztree-ajax", "gojs"] progress="false" ]
            <script type="text/javascript">
                var prefix = ctx + "osfw/activiti/procdef";

                $(function () {

                    initLayoutRight(false, function (tag) {
                        if (tag == 'indent') {
                            $("#myDiagramDiv canvas").css("width", $("#myDiagramDiv canvas").width() + 204);
                            $("#myDiagramDiv canvas + div").css("width", $("#myDiagramDiv canvas").width() + 204);
                        } else {
                            $("#myDiagramDiv canvas").css("width", $("#myDiagramDiv canvas").width() - 204);
                            $("#myDiagramDiv canvas + div").css("width", $("#myDiagramDiv canvas").width() - 204);
                        }
                    });

                    initProcessFlow();

                    $('input[type=radio][name=processType]').change(function () {
                        var name = $.common.trim($(this).next("span")[0].nextSibling.nodeValue);
                        $(window.frameElement)[0].src = $(this).data("url");
                    });

                });

                $("#form-process-add").validate({
                    /* rules: {
                       /!* 此处设置表单校验规则 *!/
                        shareDeptIds: {
                            maxlength: 5000
                        },
                        shareDeptNames: {
                            maxlength: 5000
                        },
                        remark: {
                            maxlength: 500
                        },
                        name: {
                            remote: {
                                url: prefix + "/checkNameUnique",
                                type: "POST",
                                dataType: "json",
                                data: {
                                    name: function () {
                                        return $("input[name='name']").val();
                                    },
                                    deptId: function () {
                                        return $("input[name='deptId']").val();
                                    },
                                    edition: function () {
                                        return $("#edition").val();
                                    },
                                },
                                dataFilter: function (data, type) {
                                    return $.validate.unique(data);
                                }
                            }
                        }
                    },
                    messages: {
                        /!* 此处设置表单校验规则提示信息 *!/
                        name: {
                            remote: "本部门下已存在该流程名称"
                        }
                    },*/
                    onkeyup: false,
                    focusCleanup: true
                });

                function selectDeptTree() {
                    var treeId = $("#treeId").val();
                    var deptId = $.common.isNotEmpty(treeId) ? treeId : 0;
                    var url = ctx + "osfw/system/manage/dept" + "/selectDeptTree/" + deptId;
                    $.modal.open('部门选择', url, 380, 500, doSubmit);
                }

                function doSubmit(index, modalo) {
                    var iframeWin = modalo.find('iframe')[0];
                    var treeId = iframeWin.contentWindow.document.querySelector('#treeId').value;
                    var treeName = iframeWin.contentWindow.document.querySelector('#treeName').value;
                    $("#treeId").val(treeId);
                    $("#treeName").val(treeName);
                    $.modal.close(index);
                }

                function clearDeptTree() {
                    $("#treeId").val("0");
                    $("#treeName").val("");
                }

                function submitHandler() {
                    if($.validate.form("form-process-add")) {
                        save();
                        var data = $('input[name=metaInfo]').val();
                        if ($.common.isEmpty(data) || ($.common.isNotEmpty(data) && data.length <= 2)) {
                            $.modal.alertError("请配置流程节点后重试");
                        } else {
                            var fdata = $('#form-process-add').serializeObject();
                            fdata.projProcessNodeList = data;
                            var param = parseParam(fdata);
                            $.operate.save(prefix + "/add", param);
                        }
                    }
                }

                function multiChoiceDeptTree() {
                    $.modal.open("部门多选", ctx + "common/multiChoiceDeptTree?bmbhs=" + $("#treeId").val(), 380);
                }

                function multiChoiceDeptTreeCallBack(bmbhs, name) {
                    $("#treeId").val(bmbhs);
                    $("#treeName").val(name);
                }
            </script>
        [/@script_activiti]
    [/@body]
[/@html]